<template>
  <div class="examInfo_container">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="left">

        <div class="leftItem">

          <p>
            当前考试名称：

          </p>
          <p class="name">
            {{examInfo.theme}}

          </p>

          <p>
            考试限时：

          </p>
          <p class="name">
            {{examInfo.duration}}分钟

          </p>

          <p>
            考试时间：
          </p>
          <p class="name">
            {{examInfo.startTime}}至 {{examInfo.endTime}}
          </p>

        </div>

        <div class="left_footer">

          <el-button type="primary" @click="toplist"> 排行榜 </el-button>

          <el-button type="primary" @click="toIndex"> 返回首页 </el-button>

        </div>

      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">

        <bgmusic></bgmusic>

        <div class="rightItem">

          <div class="info">

            <h5 class="name">{{examInfo.theme}}记录</h5>
            <!-- <p>我的考试记录</p> -->

          </div>

          <el-table :data="tableData" style="width: 100%;height:90%;overflow-y:scroll">
            <el-table-column prop="createTime" class="createTime" label="测试时间">
            </el-table-column>

            <el-table-column label="详情" width="">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
              </template>
            </el-table-column>

            <el-table-column prop="totalPoint" label="分数" width="">
            </el-table-column>

            <el-table-column prop="examTime" label="用时" width="">
            </el-table-column>
          </el-table>

          <!-- <div class="pagination">
            <el-pagination :page-size="pagesize" background layout="prev, pager, next" :total="total" @prev-click="current_change" @next-click="current_change" @current-change="current_change">
            </el-pagination>
          </div> -->

        </div>

      </el-col>
    </el-row>
  </div>
</template>
<script>
import path from '@/network'

// import bgmusic from '../components/bgmusic.vue'
export default {
  name: 'App',
  components: {
    // bgmusic
  },
  data () {
    return {
      examPaper: JSON.parse(sessionStorage.getItem("examPaper")),
      examInfo: JSON.parse(sessionStorage.getItem('examInfo')),
      examResultInfo: JSON.parse(sessionStorage.getItem('examResultInfo')),
      examId: this.$route.query.id,
      total: 0,
      pagesize: 7,
      currentPage: 1,


      tableData: []


    };
  },
  created () {
  },
  mounted () {
    this.queryRecord()
    // this.recordReport()
  },

  methods: {

    queryRecord () {
      path.queryRecord({
        examId: this.$route.query.id,
        page: this.currentPage,
        pageSize: this.pagesize,
      }).then(res => {
        if (res.success === 0) {
          this.tableData = res.rows.examRecord,
            this.total = res.total;
        }

      })
    },





    toplist: function () {
      this.$router.push({ name: 'toplist', query: { id: this.$route.query.id, } })
    },


    toIndex: function () {
      this.$router.push({ name: 'index' })
    },

    handleClick (row) {
      this.$router.push({ name: 'answerlist', query: { id: this.$route.query.id, recordId: row.id } })
    }
  }
}

</script>